<template>
  <!-- Background作为背景 -->
  <div v-if="dataScreenStore.isStarBG == 1" class="canvas1">
    <Background style="position: relative; z-index: 1;" />
  </div>
  <!-- 背景群 -->
  <div v-else-if="dataScreenStore.isStarBG == 2" class="canvas2"></div>
  <div v-else-if="dataScreenStore.isStarBG == 3" class="canvas3"></div>
  <div v-else-if="dataScreenStore.isStarBG == 4" class="canvas4"></div>
  <!-- 内容部分 -->
  <div class="brand-container">
    <div class="wrap">
      <header>
        <div class="Weather">
          <Weather />
        </div>
        <h2>贵州财经大学国防教育数据总览</h2>
        <div class="showTime">
          <Time />
        </div>
      </header>
      <section class="mainbox">
        <div class="item left">

          <div class="panel">
            <RouterLink class="router-link" :to="{ path: '/dataScreen/leftBottomChartMain' }">
              全校身高体重分布
            </RouterLink>
            <LeftBottomChart />
          </div>

          <div class="panel">
            <RouterLink class="router-link" :to="{ path: '/dataScreen/rightTop-chartMain' }">
              各学院入伍人数排行榜/TOP8
            </RouterLink>
            <RightTopChart />
          </div>

          <div class="panel">
            <RouterLink class="router-link" :to="{ path: '/dataScreen/leftCenterChartMain' }">
              年龄分布
            </RouterLink>
            <LeftCenterChart />
          </div>


        </div>

        <div class="item center">
          <div class="total">
            <div class="total-hd">
              <ul>
                <li>
                  <CountTo :startVal="0" :endVal="totalClub" :duration="5000" />
                </li>
                <li>
                  <CountTo :startVal="0" :endVal="totalReserve" :duration="7000" />
                </li>
                <li>
                  <CountTo :startVal="0" :endVal="totalJoinArmy" :duration="10000" />
                </li>
              </ul>
            </div>
            <div class="total-bd">
              <ul>
                <li>军事兴趣类社团人数</li>
                <li>预储备人数</li>
                <li>入伍人数</li>
              </ul>
            </div>
          </div>
          <div class="router-view">
            <RouterView />
            <div class="function-ball-container">
              <FunctionBall />
            </div>
          </div>
          <div v-if="dataScreenStore.isEarth" class="map">
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
          </div>
        </div>

        <div class="item right">

          <div class="panel">
            <RouterLink class="router-link" :to="{ path: '/dataScreen/leftTopChartMain' }">
              预储&军事兴趣社团各学院人数
            </RouterLink>
            <LeftTopChart />
          </div>

          <div class="panel">
            <RouterLink class="router-link" :to="{ path: '/dataScreen/rightCenterChartMain' }">
              社团男女身高体重分布
            </RouterLink>
            <RightCenterChart />
          </div>
          <div class="panel">
            <RouterLink class="router-link" :to="{ path: '/dataScreen/rightBottom-chartMain' }">
              社团成员发展情况
            </RouterLink>
            <RightBottomChart />
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { RouterView } from 'vue-router';
import { CountTo } from 'vue3-count-to';
import { RouterLink } from 'vue-router';
import { onMounted, ref } from 'vue';

import Background from '@/components/data-screen/Background.vue';
import Weather from '@/components/data-screen/heard/Weather.vue';
import Time from '@/components/data-screen/heard/Time.vue';
import LeftTopChart from '@/components/data-screen/left-top/LeftTopChart.vue';
import LeftCenterChart from '@/components/data-screen/left-center/LeftCenterChart.vue';
import LeftBottomChart from '@/components/data-screen/left-bottom/LeftBottomChart.vue';
import RightTopChart from '@/components/data-screen/right-top/RightTopChart.vue';
import RightCenterChart from '@/components/data-screen/right-center/RightCenterChart.vue';
import RightBottomChart from '@/components/data-screen/right-bottom/RightBottomChart.vue';
import FunctionBall from '@/components/data-screen/FunctionBall.vue';
import { useDataSreenStore } from '@/store/data-screen';
import { getHeardData } from '@/api/data-screen/MainData';

const dataScreenStore = useDataSreenStore();

const totalClub = ref(null);
const totalReserve = ref(null);
const totalJoinArmy = ref(null)
const initData = async () => {
  const result = (await getHeardData()).data;
  totalClub.value = result.totalClub;
  totalReserve.value = result.totalReserve;
  totalJoinArmy.value = result.totalJoinArmy;
}

onMounted(() => {
  initData();
})

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

//中心图表
.router-view {
  position: relative;
  height: 86%;
  width: 100%;
}

.function-ball-container {
  position: absolute;
  bottom: 0.4rem; // 定位到父容器的底部
  left: 50%; // 定位到父容器的水平中间
  transform: translateX(-50%); // 通过 transform 调整水平居中
  z-index: 10; // 确保 FunctionBall 在 RouterView 之上
}

.brand-container {
  height: 100vh;
  width: 100vw;
  position: absolute;
  overflow: auto;
  z-index: 2;
  // 隐藏滚动条（兼容所有浏览器）
  scrollbar-width: none;
  /* Firefox */
}

@media (max-width: 768px) {
  header {
    //min-width: auto; // 移除固定最小宽度
    width: 100%;
    max-width: 768px; // 使用百分比宽度
    overflow: visible; // 允许内容溢出
  }

  .mainbox {
    //min-width: auto; // 移除固定最小宽度
    width: 100%;
    max-width: 768px; // 使用百分比宽度
    overflow: visible; // 允许内容溢出
  }
}


.canvas1,
.canvas2,
.canvas3,
.canvas4 {
  position: absolute;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

.canvas2 {
  background: url('../../assets/brand/bg.jpg') no-repeat center center / cover;
}

.canvas3 {
  background: url('../../assets/bg.jpg') no-repeat center center / cover;
}

.canvas4 {
  //background: url('../../assets/bigdataview.png') no-repeat center center / cover;
  background-color: black;
}


.router-link {
  text-align: left;
  color: #00bfff;
  font-size: 1.26rem;
  font-weight: 400;
  text-decoration: none;
}

@font-face {
  font-family: 'DigitaldreamFat';
  src: url('../../assets/brand/DigitaldreamFat.ttf') format('truetype');
}

.router-view {
  position: relative;
  height: 86%;
  width: 100%;
  align-content: center;
}



.brand-container {
  h2 {
    text-align: left;
    color: #1f58d5;
    font-size: 1.28rem;
    font-weight: 400;
  }

  .wrap {
    height: 100%;
    line-height: 1.8rem;

    header {
      position: relative;
      //min-width: 1000px;
      //max-width: 2200px;
      height: 5.7rem;
      background: url(../../assets/brand/head_bg.png) no-repeat top center;
      background-size: 100% 100%;

      h2 {
        color: #7ef0ff;
        font-size: 2.7075rem;
        text-align: center;
        line-height: 4.275rem;
        letter-spacing: 0.18rem;
      }

      .Weather {
        position: absolute;
        left: 6.5rem;
        top: 2.5rem;
        font-size: 1.425rem;
        color: rgba(126, 240, 255, 0.7);
      }

      .showTime {
        line-height: 1.1rem;
        position: absolute;
        right: 5rem;
        top: 2.85rem;
        color: rgba(126, 240, 255, 0.7);
        display: flex;
      }
    }

    .mainbox {
      //min-width: 1000px;
      //max-width: 2200px;
      padding: 0.125rem 0.125rem 0;
      display: flex;

      .item {
        flex: 3;

        &.center {
          flex: 4.2;
          margin: 0 0.125rem 0.1rem;
          //overflow: hidden;

          ul,
          ol {
            list-style-type: none;
            padding-left: 0;
          }

          .total {
            background: rgba(101, 132, 226, 0.1);
            padding: 0.1875rem;
            height: 15%;

            .total-hd {
              position: relative;
              border: 0.1rem solid rgba(25, 186, 139, 0.17);
              line-height: 5rem;

              ul {
                display: flex;

                %li-line {
                  content: '';
                  position: absolute;
                  height: 50%;
                  width: 0.1rem;
                  background: rgba(255, 255, 255, 0.2);
                  top: 25%;
                }

                li {
                  position: relative;
                  flex: 1;
                  text-align: center;
                  font-size: 2.9rem;
                  color: #ffeb7b;
                  padding: 0.05rem 0;
                  font-family: 'DigitaldreamFat', sans-serif;
                  font-weight: bold;

                  &:nth-child(2) {
                    &:after {
                      @extend %li-line;
                      right: 0;
                    }

                    &:before {
                      @extend %li-line;
                      left: 0;
                    }
                  }
                }
              }

              &:before {
                content: '';
                position: absolute;
                width: 4rem;
                height: 1.5rem;
                border-top: 0.15rem solid #02a6b5;
                border-left: 0.15rem solid #02a6b5;
                top: 0;
                left: 0;
              }

              &:after {
                content: '';
                position: absolute;
                width: 4rem;
                height: 1.5rem;
                border-bottom: 0.15rem solid #02a6b5;
                border-right: 0.15rem solid #02a6b5;
                right: 0;
                bottom: 0;
              }
            }

            .total-bd {
              ul {
                display: flex;

                li {
                  flex: 1;
                  text-align: center;
                  font-size: 0.9rem;
                  color: rgba(255, 255, 255, 0.7);
                  padding-top: 0.3rem;
                }
              }
            }
          }
        }

        %map-style {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 25.9rem;
          height: 25.9rem;
          background: url(../../assets/brand/map.png) no-repeat;
          background-size: 100% 100%;
          opacity: 0.3;
        }

        .map {
          position: relative;
          margin-top: -22rem;
          z-index: -1;

          .map1 {
            @extend %map-style;
          }

          .map2 {
            @extend %map-style;
            width: 32.15rem;
            height: 32.15rem;
            background-image: url(../../assets/brand/lbx.png);
            opacity: 0.8;
            -webkit-animation: rotate 15s linear infinite;
            animation: rotate 15s linear infinite;
            z-index: 2;
          }

          .map3 {
            @extend %map-style;
            width: 28.3rem;
            height: 28.3rem;
            background-image: url(../../assets/brand/jt.png);
            -webkit-animation: rotate1 10s linear infinite;
            animation: rotate1 10s linear infinite;
          }
        }

        .panel {
          position: relative;
          height: 16.9rem;
          border: 0.1rem solid rgba(25, 186, 139, 0.17);
          background: rgba(255, 255, 255, 0.04) url(../../assets/brand/line.png);
          padding: 0 0.6rem 0;
          margin-bottom: 0.6rem;

          &:before {
            position: absolute;
            top: -0.1rem;
            left: -0.1rem;
            content: '';
            width: 1rem;
            height: 1rem;
            border-top: 0.15rem solid #02a6b5;
            border-left: 0.15rem solid #02a6b5;
          }

          &:after {
            position: absolute;
            top: 0;
            right: 0;
            content: '';
            width: 1rem;
            height: 1rem;
            border-top: 0.15rem solid #02a6b5;
            border-right: 0.15rem solid #02a6b5;
          }

          .panel-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;

            &:before {
              position: absolute;
              bottom: 0;
              left: 0;
              content: '';
              width: 1rem;
              height: 1rem;
              border-bottom: 0.15rem solid #02a6b5;
              border-left: 0.15rem solid #02a6b5;
            }

            &:after {
              position: absolute;
              bottom: 0;
              right: 0;
              content: '';
              width: 1rem;
              height: 1rem;
              border-bottom: 0.15rem solid #02a6b5;
              border-right: 0.15rem solid #02a6b5;
            }
          }

          h2 {
            text-align: left;
            color: #00bfff;
            font-size: 1.26rem;
            font-weight: 400;

            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>